<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vCard - About</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="address=no">
        <meta name="author" content="ArtTemplate">
        <meta name="description" content="vCard">
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@ArtTemplates">
        <meta name="twitter:title" content="vCard">
        <meta name="twitter:description" content="vCard">
        <meta name="twitter:image" content="assets/images/social.jpg">
        <meta property="og:title" content="ArtTemplate">
        <meta property="og:type" content="website">
        <meta property="og:url" content="your url website">
        <meta property="og:image" content="assets/images/social.jpg">
        <meta property="og:description" content="vCard">
        <meta property="og:site_name" content="vCard">
        <link rel="stylesheet" type="text/css" href="static/css/style.css">
        <link rel="stylesheet" type="text/css" href="static/css/style-demo.css">
    </head>
    <body>
        <div class="preloader">
            <div class="preloader__wrap">
                <div class="circle-pulse">
                    <div class="circle-pulse__1"></div>
                    <div class="circle-pulse__2"></div>
                </div>
                <div class="preloader__progress">
                    <span></span>
                </div>
            </div>
        </div>
        <main class="main">
            <div class="header-image">
                <div class="js-parallax" style="background-image: url(static/image/bg.jpg);"></div>
            </div>
            <div class="container gutter-top">
                <header class="header box">
                    <div class="header__left">
                        <div class="header__photo">
                            <img class="header__photo-img" src="static/image/bg.jpg" alt="陈小鹏">
                        </div>
                        <div class="header__base-info">
                            <h4 class="title titl--h4">陈小鹏</h4>
                            <div class="status">前端开发</div>
                            <ul class="header__social">
                                <li>
                                    <a href="javascript:;">
                                        <i class="font-icon icon-facebook1"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="font-icon icon-twitter1"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="font-icon icon-instagram1"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="header__right">
                        <ul class="header__contact">
                            <li>
                                <span class="overhead">Email</span>
                                775964415@qq.com
                            </li>
                            <li>
                                <span class="overhead">Phone</span>
                                18718873370
                            </li>
                        </ul>
                        <ul class="header__contact">
                            <li>
                                <span class="overhead">Birthday</span>
                                1992.05
                            </li>
                            <li>
                                <span class="overhead">Location</span>
                                汕头
                            </li>
                        </ul>
                    </div>
                </header>
                <div class="row sticky-parent">
                    <aside class="col-12 col-md-12 col-lg-2">
                        <div class="sidebar box sticky-column">
                            <ul class="nav">
                                <li class="nav__item">
                                    <a class="active" href="">
                                        <i class="icon-user"></i>
                                        个人简介
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a href="resume.html">
                                        <i class="icon-file-text"></i>
                                        履历
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a href="works.html">
                                        <i class="icon-codesandbox"></i>
                                        作品
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a href="blog.html">
                                        <i class="icon-book-open"></i>
                                        Blog
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a href="contact.html">
                                        <i class="icon-book"></i>
                                        联系方式
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </aside>
                    <div class="col-12 col-md-12 col-lg-10">
                        <div class="box box-content">
                            <div class="pb-0 pb-sm-2">
                                <h1 class="title title--h1 first-title title__separate">About Me</h1>
                                <p>I'm 前端开发 and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs.</p>
                                <p>My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.</p>
                            </div>
                            <div class="mt-1">
                                <h2 class="title title--h3">What I'm Doing</h2>
                                <div class="row">
                                    <div class="col-12 col-lg-6">
                                        <div class="case-item">
                                            <img class="case-item__icon" src="static/picture/icon-design.svg" alt="">
                                            <div>
                                                <h3 class="title title--h4">Web Design</h3>
                                                <p class="case-item__caption">The most modern and high-quality design made at a professional level.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="case-item">
                                            <img class="case-item__icon" src="static/picture/icon-dev.svg" alt="">
                                            <div>
                                                <h3 class="title title--h4">Web Development</h3>
                                                <p class="case-item__caption">High-quality development of sites at the professional level.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="case-item">
                                            <img class="case-item__icon" src="static/picture/icon-app.svg" alt="">
                                            <div>
                                                <h3 class="title title--h4">Mobile Apps</h3>
                                                <p class="case-item__caption">Professional development of applications for iOS and Android.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <div class="case-item">
                                            <img class="case-item__icon" src="static/picture/icon-photo.svg" alt="">
                                            <div>
                                                <h3 class="title title--h4">Photography</h3>
                                                <p class="case-item__caption">I make high-quality photos of any category at a professional level.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-2">
                                <h2 class="title title--h3">Testimonials</h2>
                                <div class="swiper-container js-carousel-review">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide review-item">
                                            <svg class="avatar avatar--80" viewbox="0 0 84 84">
                                                <g class="avatar__hexagon">
                                                    <image xlink:href="assets/img/avatar-2.jpg" height="100%" width="100%"></image>
                                                </g>
                                            </svg>
                                            <div class="review-item__textbox">
                                                <h4 class="title title--h5">Daniel Lewis</h4>
                                                <p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
                                            </div>
                                        </div>
                                        <div class="swiper-slide review-item">
                                            <svg class="avatar avatar--80" viewbox="0 0 84 84">
                                                <g class="avatar__hexagon">
                                                    <image xlink:href="assets/img/avatar-3.jpg" height="100%" width="100%"></image>
                                                </g>
                                            </svg>
                                            <div class="review-item__textbox">
                                                <h4 class="title title--h5">Jessica Miller</h4>
                                                <p class="review-item__caption">thanks to the skill of Felecia,we have a design that we can be proud of.</p>
                                            </div>
                                        </div>
                                        <div class="swiper-slide review-item">
                                            <svg class="avatar avatar--80" viewbox="0 0 84 84">
                                                <g class="avatar__hexagon">
                                                    <image xlink:href="assets/img/avatar-4.jpg" height="100%" width="100%"></image>
                                                </g>
                                            </svg>
                                            <div class="review-item__textbox">
                                                <h4 class="title title--h5">Tanya Ruiz</h4>
                                                <p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
                                            </div>
                                        </div>
                                        <div class="swiper-slide review-item">
                                            <svg class="avatar avatar--80" viewbox="0 0 84 84">
                                                <g class="avatar__hexagon">
                                                    <image xlink:href="assets/img/avatar-5.jpg" height="100%" width="100%"></image>
                                                </g>
                                            </svg>
                                            <div class="review-item__textbox">
                                                <h4 class="title title--h5">Thomas Castro</h4>
                                                <p class="review-item__caption">thanks to the skill of Felecia,we have a design that we can be proud of.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>
                            <div class="mt-4">
                                <h2 class="title title--h3">Clients</h2>
                                <div class="swiper-container js-carousel-clients">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="#">
                                                <img src="static/picture/logo-1.svg" alt="Logo">
                                            </a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="#">
                                                <img src="static/picture/logo-2.svg" alt="Logo">
                                            </a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="#">
                                                <img src="static/picture/logo-3.svg" alt="Logo">
                                            </a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="#">
                                                <img src="static/picture/logo-4.svg" alt="Logo">
                                            </a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="#">
                                                <img src="static/picture/logo-1.svg" alt="Logo">
                                            </a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="#">
                                                <img src="static/picture/logo-2.svg" alt="Logo">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>
                        </div>
                        <footer class="footer">© 2023 vCard</footer>
                    </div>
                </div>
            </div>
        </main>
        <svg class="svg-defs">
            <clippath id="avatar-box">
                <path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"></path>
            </clippath>
            <clippath id="avatar-hexagon">
                <path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"></path>
            </clippath>
        </svg>
        <div class="back-to-top"></div>
        <script src="static/js/jquery-3.4.1.min.js"></script>
        <script src="static/js/plugins.min.js"></script>
        <script src="static/js/common.js"></script>
        <script src="static/js/plugins-demo.js"></script>
    </body>
</html>
